<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<#include "../common/header.ftl">
	<#include "../common/upload.ftl">
	<link rel="stylesheet" href="${basePath}/plugins/layui/css/layui.css" media="all" />
	<script src="${basePath}/plugins/layui/layui.js" charset="utf-8"></script>
	<link rel="stylesheet" href="${basePath}/css/global.css" media="all">
	<script type="text/javascript" src="${basePath}/js/jquery.min.js"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.easyui.min.1.2.2.js"></script>
	<style>
		.goods-image{
			width:100%;
			min-height:120px;
			padding:5px 10px;
		}
		.goods-image li{
			float: left;
		    margin: 2px 5px;
		    list-style: none;
		    display: block;
		    white-space: nowrap;
		    width: 120px;
		}
		.goods-image img{
			width:100px;
			height:100px;
		}
		.close-modal {
		    position: absolute;
		    width: 18px;
		    height: 18px;
		    font-size: 14px;
		    line-height: 16px;
		    border-radius: 9px;
		    z-index: 2;
		    color: #fff;
		    text-align: center;
		    cursor: pointer;
		    background: rgba(153, 153, 153, 0.6);
		}
		.site-upload {
		    //position: absolute;
		    //top: 50%;
		    //left: 50%;
		    margin: 20px 0 0 20px;
		}
		.site-upload img{
		    width: 150px;
		    height: 150px;
		}
	</style>
	</head>
	<body>
	<div class="am-form-group">
		<div class="site-upload">
		 	<img data-img="" src="${basePath}/image/default_goods.jpg" >
		  	<div class="site-upbar">
		  		<div class="layui-box layui-upload-button">
		  			<form target="layui-upload-iframe" method="get" key="set-mine" enctype="multipart/form-data" action="#">
		  				 <input type="file" name="files" data-type="one" class="layui-upload-file" >
		  			</form>
		  		 	<span class="layui-upload-icon"><i class="layui-icon">&#xe608;</i>上传封面图 </span>
		  		 	<p class="am-form-help">封面图片 宽&nbsp;&nbsp;750PX 高&nbsp;&nbsp;750PX</p>
		    	</div>
		 	</div>
		</div>
	</div>
	<div class="am-form-group">
		<div  style="width:100%;float:left;">
			<ul class="goods-image">
			</ul>
		</div>
	  	<div  style="float:left;">
	  		<div class="layui-box layui-upload-button">
	  			<form target="layui-upload-iframe" method="get" key="set-mine" enctype="multipart/form-data" action="#">
	  				 <input type="file" name="files" data-type="more" class="layui-upload-file" >
	  			</form>
	  		 	<span class="layui-upload-icon"><i class="layui-icon">&#xe608;</i>上传商品图 </span>
	    	</div>
	 	</div>
	</div>
	<div class="am-form-group">
		<textarea id="remark" name="remark"	style="width: 850px; height: 400px;"></textarea>
	</div>
	</body>

<script type="text/javascript">
 var basePath = "${basePath}";
 var imgUrl = "${imgUrl}";
$(document).ready(function(){
	var editor = KindEditor.create('textarea[name="remark"]',kind_editor_option);
	KindEditor.ready(function(K){
	var editor = K.editor({
	      allowFileManager:true,
	  });
	  $(document).on('click', '[id^="upload_trigger_"]', function() {
	      domid = this.id.replace('upload_trigger_','');
	      console.log(domid);
	      editor.uploadJson = webuploader_server;
	      editor.formatUploadUrl = false;
	      editor.loadPlugin('image', function() {
	      	editor.plugin.imageDialog({
	        	showRemote : false,
	            imageUrl : '',
	            clickFn : function(data) {
	              console.log(data);
	              console.log(1);
	            },
	            afterUpload :function(data){
	              console.log(data);
	              console.log(2);
	            }
	          });
	      });
	  }); 
	});
  layui.use(['upload'],function(){

  layui.upload({
    url: basePath+'/restful/file/upload.shtml', //上传接口
    ext: 'jpg|png|bmp|jpeg',
    method: 'post',
    success: function(res,input){ //上传成功后的回调
    	console.log(res);
    	var type=$(input).attr("data-type");
      if(res.code=="000000"){
          var id = res.data[0].id;
	      var src=imgUrl+id;
	      if(type == "more"){
	    	 var html="<li><img data-img=\""+id+"\"  src=\""+src+"\"><a class=\"close-modal\" onclick=\"deleteImage(this)\">x</a></li>";
	    	 $(".goods-image").append(html);
		   }else{
		     $(input).parent().parent().parent().parent().children("img").attr("src",src);
		     $(input).parent().parent().parent().parent().children("img").attr("data-img",id);
		   }
      }else{
      	layer.msg("上传失败")
      }
    }
  });
});
});
function deleteImage(e){
    $(e).parent().remove();
}
</script>

</html>